<template>
    <div>
        <el-tabs type="border-card" v-model="type">
            <el-tab-pane label="基础设置" name="1">
                <el-form ref="formRef" :model="formData1" label-width="84px" label-position="top">
                    <el-form-item label="轮播设置" prop="loop_img_setting">
                        <div class="flex-1">
                            <!-- 外层需要有足够的宽度，这样预览图和选择按钮才不会直接换行 -->
                            <material-picker :limit="4" v-model="loop_img_setting_arr" />
                        </div>
                    </el-form-item>
                    <el-form-item label="广告图片" prop="fixed_ad_img">
                        <div class="flex-1">
                            <!-- 外层需要有足够的宽度，这样预览图和选择按钮才不会直接换行 -->
                            <material-picker :limit="4" v-model="fixed_ad_img_arr" />
                        </div>
                    </el-form-item>
                    <el-form-item label="客服电话" prop="idNumber">
                        <el-input v-model="formData1.service_call" placeholder="请输入客服电话" />
                    </el-form-item>
                    <el-form-item label="平台分佣比例" prop="idNumber">
                        <el-input v-model="formData1.platform_commission_rate" placeholder="请输入平台分佣比例" />
                    </el-form-item>
                    <el-form-item label="提现比例" prop="idNumber">
                        <el-input v-model="formData1.withdraw_rate" placeholder="请输入提现比例" />
                    </el-form-item>
                    <el-form-item label="律师接单费用" prop="idNumber">
                        <el-input v-model="formData1.lawyer_price" placeholder="请输入律师接单费用" />
                    </el-form-item>
                    <el-form-item label="债权顾问管理风险协议时效（年）" prop="idNumber">
                        <el-input v-model="formData1.customer_compacrt_ageing" placeholder="请输入债权顾问管理风险协议时效（年）" />
                    </el-form-item>
                    <el-form-item label="AI用户初始对话余额" prop="idNumber">
                        <el-input v-model="formData1.ai_user_money" placeholder="AI用户初始对话余额" />
                    </el-form-item>
                    <el-button style="margin: 10px 0 0 0" type="primary" @click="doSaveSetting(formData1, 1)">保存</el-button>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="支付配置" name="2">
                <el-form ref="formRef" :model="formData2" label-width="84px" label-position="top">
                    <el-form-item label="新大陆商户号">
                        <el-input v-model="formData2.newland_mercId" placeholder="请输入新大陆商户号" />
                    </el-form-item>
                    <el-form-item label="新大陆机构号">
                        <el-input v-model="formData2.newland_orgNo" placeholder="请输入新大陆机构号" />
                    </el-form-item>
                    <el-form-item label="新大陆终端号">
                        <el-input v-model="formData2.newland_trmNo" placeholder="请输入新大陆终端号" />
                    </el-form-item>
                    <el-form-item label="新大陆密钥">
                        <el-input v-model="formData2.newland_secret" placeholder="请输入新大陆密钥" />
                    </el-form-item>
                    <el-button style="margin: 10px 0 0 0" type="primary" @click="doSaveSetting(formData2, 2)">保存</el-button>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="轮播配置" name="3">
                <el-form style="border: 1px solid #cdcaca;margin: 20px 0 0 0" ref="formRef" v-for="(item, index) in formData3.jump_loop_imgs" :key="index" label-width="84px">
                    <el-form-item style="margin: 20px 0 0 0" label="轮播设置">
                        <div class="flex-1">
                            <!-- 外层需要有足够的宽度，这样预览图和选择按钮才不会直接换行 -->
                            <material-picker :limit="4"  v-model="item.newImage"/>
                        </div>
                    </el-form-item>
                    <el-form-item style="margin: 0 20px 0 0" label="跳转链接" >
                        <el-input v-model="item.jump_link" clearable placeholder="请输入跳转链接"/>
                    </el-form-item>
                    <el-form-item label="是否启用">
                        <el-switch v-model="item.switch_on" :active-value="true" :inactive-value="false" />
                    </el-form-item>
                </el-form>
                <el-button style="margin: 20px 10px 0 0" type="primary" @click="addImage()">添加</el-button>
                <el-button style="margin: 20px 0 0 20px" type="primary" @click="doSaveSetting(formData3, 3)">保存</el-button>
            </el-tab-pane>
        </el-tabs>

    </div>
</template>
<script lang="ts" setup>
import {settingLists2, saveSetting} from "@/api/setting";
import feedback from "@/utils/feedback";

const type = ref('1')

watch(type, () => {
    getDetail(type.value)
})

const formData1 = reactive({
    loop_img_setting: '',
    fixed_ad_img: '',
    service_call: '',
    platform_commission_rate: '',
    withdraw_rate: '',
    lawyer_price: '',
    customer_compacrt_ageing: '',
    ai_user_money: ''
});

const formData2 = reactive({
    newland_mercId: '',
    newland_orgNo: '',
    newland_trmNo: '',
    newland_secret: ''
});

const formData3 = reactive({
    jump_loop_imgs: []
});

const loop_img_setting_arr = computed({
    get() {
        let parse = [];
        let parseRes = [];
        if (formData1.loop_img_setting) {
            parse = JSON.parse(formData1.loop_img_setting);
            parse.forEach(item => {
                parseRes.push(item.path)
            })
        }
        return parseRes;
    },
    set(newValue) {
        let parse = [];
        for (const key in newValue) {
            let img = {path:newValue[key]}
            parse.push(img)
        }
        formData1.loop_img_setting = JSON.stringify(parse)
    }
});

const fixed_ad_img_arr = computed({
    get() {
        let parse = [];
        let parseRes = [];
        if (formData1.fixed_ad_img) {
            parse = JSON.parse(formData1.fixed_ad_img);
            parse.forEach(item => {
                parseRes.push(item.path)
            })
        }
        return parseRes;
    },
    set(newValue) {
        let parse = [];
        for (const key in newValue) {
            let img = {path:newValue[key]}
            parse.push(img)
        }
        formData1.fixed_ad_img = JSON.stringify(parse)
    }
});

const getDetail = async (type: string) => {
    const data = await settingLists2(type)
    setFormData(data, formData1)
    setFormData(data, formData2)
    setFormData(data, formData3)
}

const setFormData = async (data: Record<string, any>, formData:Record<string, any>) => {
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
    }
    console.log("------",formData3)
}

const doSaveSetting = async (item: Record<string, any>, typeStr: number) => {
    item.type = typeStr
    if (typeStr === 3) {
        let a = JSON.stringify(item.jump_loop_imgs)
        item.jump_loop_imgs = a
    }
    await saveSetting(item);
    feedback.msgSuccess('操作成功');
    getDetail(typeStr);
}

const addImage = async () => {
    let newItem = {
        image: [],
        index: '1',
        jump_link: '',
        newImage: [],
        status: 1,
        switch_on: true
    }
    formData3.jump_loop_imgs.push(newItem);
}


getDetail(type.value)
</script>
